<template>
  <div class="root">
    <div class="header">
      <img :src="logo ?? './logo.svg'" alt="Logo" height="33" />
      <div class="logo-text">{{ title }}</div>
    </div>
    <div class="container">
      <div class="left-banner"></div>
      <div class="login-card">
        <div class="title">
          欢迎登录
        </div>
        <EmailLogin v-if="isEmailLogin" />
        <a-tabs v-else class="account-tab" default-active-key="1">
          <a-tab-pane key="1" title="账号登录">
            <AccountLogin />
          </a-tab-pane>
          <a-tab-pane key="2" title="手机号登录">
            <PhoneLogin />
          </a-tab-pane>
        </a-tabs>
        <div class="oauth">
          <a-divider class="text" orientation="center">
            其他登录方式
          </a-divider>
          <div class="idps">
            <div v-if="!isEmailLogin" class="mail app" @click="toggleLoginMode">
              <icon-email /> 邮箱登录
            </div>
            <div v-else class="account app" @click="toggleLoginMode">
              <icon-user /> 账号/手机号登录
            </div>
            <a-tooltip content="码云" mini>
              <a-link class="app" @click="onOauth('gitee')">
                <svg
                  class="icon"
                  fill="#C71D23"
                  role="img"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"
                  />
                </svg>
              </a-link>
            </a-tooltip>
            <a-tooltip content="GitHub" mini>
              <a-link class="app" @click="onOauth('github')">
                <svg
                  class="icon"
                  role="img"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
                  />
                </svg>
              </a-link>
            </a-tooltip>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isDesktop" class="footer">
      <div class="beian">
        <div class="below text">{{ appStore.getCopyright() }}{{ appStore.getForRecord() ? ` · ${appStore.getForRecord()}` : '' }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import AccountLogin from './components/account/index.vue'
import PhoneLogin from './components/phone/index.vue'
import EmailLogin from './components/email/index.vue'
import { thirdpartyAuth } from '@/apis/auth'
import { useAppStore } from '@/stores'
import { useDevice } from '@/hooks'

defineOptions({ name: 'Login' })

const { isDesktop } = useDevice()
const appStore = useAppStore()
const title = computed(() => appStore.getTitle())
const logo = computed(() => appStore.getLogo())

const isEmailLogin = ref(false)

// 切换登录模式
const toggleLoginMode = () => {
  isEmailLogin.value = !isEmailLogin.value
}

// 第三方登录授权
const onOauth = async (source: string) => {
  const { data } = await thirdpartyAuth(source)
  window.location.href = data.authorizeUrl
}
</script>

<style lang="less" scoped>
.root {
  background-image: url('/src/assets/images/login-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;

  a {
    color: #3370ff;
    cursor: pointer !important;
    text-decoration: none;
  }

  a:hover {
    color: #6694ff;
  }

  .header {
    padding: 32px 40px 0;
    img {
      vertical-align: middle;
    }
    .logo-text {
      display: inline-block;
      margin-right: 4px;
      margin-left: 4px;
      color: #1d2129;
      font-size: 24px;
      vertical-align: middle;
    }
  }

  .container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: calc(100vh - 100px);
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
    min-height: 650px;
    .left-banner {
      flex: 1 1;
      height: 100%;
      max-height: 700px;
      position: relative;
      img {
        height: 100%;
        left: 0;
        max-height: 350px;
        max-width: 500px;
        object-fit: contain;
        position: absolute;
        top: 4.5%;
        width: 100%;
      }
    }
    .login-card {
      display: flex;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      min-height: 500px;
      position: relative;
      width: 450px;
      flex-direction: column;
      margin-bottom: 53px;
      padding: 48px 43px 32px;
      .title {
        color: #020814;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.003em;
        line-height: 32px;
        padding: 0 5px;
      }
      .account-tab {
        margin-top: 36px;
        :deep(.arco-tabs-nav::before) {
          display: none;
        }
        :deep(.arco-tabs-tab-title) {
          font-size: 16px;
          font-weight: 500;
          line-height: 22px;
          display: inline-block;
          padding: 1px 0;
          position: relative;
        }
        :deep(.arco-tabs-tab-title:hover) {
          color: rgb(22, 93, 255);
        }
        :deep(.arco-tabs-tab-title:before) {
          display: none;
        }
        :deep(.arco-tabs-tab) {
          margin: 0 30px 0 6px;
          color: rgb(78, 89, 105);
        }
      }

      :deep(.arco-checkbox-label) {
        color: #1d2129;
      }
      :deep(.arco-select-view-single) {
        color: #1d2129;
      }
      .oauth {
        margin-top: 20px;
        padding: 0 5px;
        :deep(.arco-divider-text) {
          color: #80838a;
          font-size: 12px;
          font-weight: 400;
          line-height: 20px;
          background: #fff;
        }
        :deep(.arco-divider-horizontal) {
          border-bottom: 1px solid rgb(229, 230, 235);
        }
        :deep(.arco-divider) {
          margin-bottom: 25px;
        }
        .idps {
          align-items: center;
          display: flex;
          justify-content: center;
          width: 100%;
          .app {
            margin-right: 12px;
            align-items: center;
            border: 1px solid #eaedf1;
            border-radius: 32px;
            box-sizing: border-box;
            display: flex;
            height: 32px;
            justify-content: center;
            width: 32px;
            cursor: pointer;
            .icon {
              width: 21px;
              height: 20px;
            }
          }
          .app:hover {
            background: #f3f7ff;
            border: 1px solid #97bcff;
          }
          .mail {
            min-width: 81px;
            width: 100px;
          }
          .account {
            min-width: 147px;
            width: 147px;
          }
          .mail,
          .account {
            color: #41464f;
            font-size: 12px;
            font-weight: 400;
            line-height: 20px;
            padding: 6px 10px;
          }
          .mail svg,
          .account svg {
            font-size: 16px;
            margin-right: 10px;
          }
          .mail:hover,
          .account:hover {
            color: rgb(22, 93, 255);
          }
          .mail svg:hover,
          .account svg:hover {
            color: rgb(22, 93, 255);
          }
        }
      }
    }
  }

  .footer {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    .beian {
      .text {
        color: #41464f;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0.2px;
        line-height: 20px;
        text-align: center;
      }
      .below {
        align-items: center;
        display: flex;
      }
    }
  }
}
</style>
